<template>
  <div>
     <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>家具管理</el-breadcrumb-item>
      <el-breadcrumb-item>家具列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <!-- <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input> -->
         </el-col>
         <el-col :span="4">
          <el-button @click="addbox=true " type="primary">添加家具</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="furnList" border stripe>
            <el-table-column prop='id' label="序号"></el-table-column>
            <el-table-column prop="furnitureImg" label="家具图标">
                <template slot-scope="scope">
                  <el-image style="width: 110px; height: 110px" :src="scope.row.furnitureImg"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="furnitureName" label="家具名称"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>

                 <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button>
                </template>
            </el-table-column>
          </el-table>
    </el-card>

    <!-- 新增框  -->
     <el-dialog title="新增家具" :visible.sync="addbox">
      <el-form  >
        <el-form-item label="家具图片" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="家具名称" >
          <el-input v-model="furnAdd.furnitureName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addFurn" type="primary">确 定</el-button>
      </div>
      </el-dialog>

       <!-- 修改框  -->
     <el-dialog title="修改房屋图片" :visible.sync="editbox">
      <el-form>
        <el-form-item label="修改房屋图片" >
          <el-upload action="#" ref="mYupload" clearFiles list-type="picture-card" :on-remove="updHandleRemove" :http-request="updCustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="家具名称" >
          <el-input v-model="furnUpd.furnitureName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateFurn" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            furnList:[],
            editbox: false,  //显示修改框
            addbox: false ,  //显示新增框
            addfile:null,
            furnAdd:{furnitureName:''},
            updfile:null,
            furnUpd:{
                id:'',
                furnitureName:''
            },
            previewImage:null
        }
    },
    created(){
        this.getFurnList()
        document.title="家具列表"
    },
    methods:{
        //删除
        async showDel(id){
            let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err);
            if(ok!='confirm'){
               return this.$message.info('你取消了删除')
            }
            let ret=await this.$http.delete(`/admin/fuinfo/delete/${id}`);
            if(ret.code != 200){
              return this.$message.error(ret.message )
            }
            this.$message.success(ret.message)
            this.getFurnList();
        },
        // 更新
        async updateFurn(){
            let formData=new FormData;
            formData.append('file',this.updfile);
            formData.append('fuinfo',JSON.stringify(this.furnUpd))
            let ret=await this.$http.put('/admin/fuinfo/update',formData);
            this.editbox=false
            this.$refs['mYupload'].clearFiles();
            
            this.updfile=null;
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message)
            this.getFurnList();
        },
        showEdit(row){
            this.editbox=true;
            this.furnUpd.id=row.id;
            this.furnUpd.furnitureName=row.furnitureName;
            this.previewImage=row.furnitureImg;
        },
        updCustomUpload(file){this.updfile=file.file},
        updHandleRemove(file,fileList){this.updfile=null;},
        // 新增
        async addFurn(){
            let formData=new FormData;
            formData.append('file',this.addfile);
            formData.append('fuinfo',JSON.stringify(this.furnAdd))
            let ret=await this.$http.post('/admin/fuinfo/add',formData);
            this.addbox=false;
            this.$refs['mYupload'].clearFiles();
            if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message)
            this.getFurnList();
        },
        customUpload(file){
            this.addfile=file.file;
        },
        handleRemove(file,fileList){this.addfile=null;},
        //查询
        async getFurnList(){
            let ret=await this.$http.get('/admin/fuinfo/selectAll');
            this.furnList=ret.data;
            console.log(ret);
        }
    }
}
</script>

<style>

</style>